<template>
    <view class="divider-line-mian" :style="{ width: width + '%', borderTopColor: borderTopColor }">
    </view>
</template>

<script>
    export default {
        props: {
            width: {
                type: Number,
                default: 90, // 设置默认宽度为90%，如果外部没有传入宽度值就使用这个默认值
                validator: function (value) {
                    return value >= 0 && value <= 100; // 验证传入的宽度值在0到100之间（百分比范围）
                }
            },
            color: {
                type: String,
                default: '#cacaca'
            }
        },
        data() {
            return {
                borderTopColor: this.color // 在data中初始化borderTopColor，使其初始值等于传入的color属性值
            };
        },
        watch: {
            color(newValue) {
                this.borderTopColor = newValue; // 当color属性值变化时，更新borderTopColor
            }
        },
        methods: {

        }
    };
</script>

<style scoped>
   .divider-line-mian {
        margin-top: 30rpx;
        margin-bottom: 30rpx;
        height: 1rpx;
        border-top: solid 1rpx;
        margin-left: auto;
        margin-right: auto;
        border-top-color: var(--border-top-color); /* 使用CSS变量来设置border-top的颜色，后续通过JavaScript动态赋值 */
    }
</style>